<template>
	<div>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px">
			<el-form :inline="true" :model="filters">
				<el-form-item label="昵称:">
					<el-input v-model="filters.name" placeholder="昵称"></el-input>
				</el-form-item>
				<el-form-item label="时间:">
					<el-col :span="11">
						<el-date-picker v-model="filters.starttime" type="date" placeholder="选择开始日期时间"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-date-picker v-model="filters.endtime" type="date" placeholder="选择结束日期时间"></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin: 0 10px" @click="findLog" :icon="View" v-permession="['FindLog']">查询</el-button>
					<el-button type="success" :icon="CirclePlus" @click="bindRefresh">刷新</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<el-table :data="logList" style="width: 100%">
			<el-table-column label="id" prop="l_id" width="100"></el-table-column>
			<el-table-column label="昵称" prop="nick" width="150"></el-table-column>
			<el-table-column label="日志内容">
				<template #default="{ row }">
					<span v-html="row.content"></span>
					<div>
						<hr style="background-color: #ebeef5; height: 1px; border: none" />
						<a href="javascript:void(0)" @click="onReply(row.l_id)" class="replay" v-permession="['ReplyLog']"
							>回复</a
						>
						<LogReply v-for="item in row.logList" :key="item.id" :replyItem="item" :logId="row.l_id"></LogReply>
					</div>
				</template>
				<!-- 日志回复 -->
			</el-table-column>
			<el-table-column label="日志时间" width="200">
				<template #default="{ row }">
					<span>{{ dayjs(row.logtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template #default="{ row }">
					<el-button type="success" size="small">编辑</el-button>
					<el-popconfirm title="确认要删除此记录吗?" @confirm="bindDeleteLog(row.l_id)">
						<template #reference>
							<el-button type="primary" size="small">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination
			background
			layout="total,sizes,prev, pager, next, jumper"
			:total="pagination.total"
			:default-page-size="5"
			:page-sizes="[5, 10, 20, 30]"
			@size-change="bindSizeChange"
			@current-change="bindCurrentChange"
		></el-pagination>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, reactive } from 'vue'
import { LogDao } from '@/api/interface'
import { getUserFromStore } from '@/common/useStore'
import { dayjs } from 'element-plus'
import { api } from '@/api'
import LogReply from './components/LogReply.vue'
import { Delete, EditPen, View, CirclePlus, Upload } from '@element-plus/icons-vue'

const { RequestLogList, RequestLogReplyAdd, RequestLogDelete } = api
const account = getUserFromStore()

const logList = ref<LogDao.ILog[]>() // 日志列表
const pagination = reactive<{ pageNo: number; pageSize: number; total: number }>({ pageNo: 1, pageSize: 5, total: 0 }) // 分页信息

const filters = ref({ name: '', starttime: '', endtime: '' })
/**
 * 日志列表
 */
const getLogList = async () => {
	const data = await RequestLogList<LogDao.IData<any>>(account.nick, pagination.pageNo, pagination.pageSize)
	const { resultCode, resultInfo } = data
	if (resultCode === 1) {
		logList.value = resultInfo.list
		pagination.total = resultInfo.total
	}
}
/**
 * 删除日志
 */
const bindDeleteLog = async (id: number) => {
	try {
		const data = await RequestLogDelete(id)
		const { resultCode } = data
		if (resultCode === 1) {
			ElMessage.success('删除成功')
			getLogList()
		}
	} catch (error) {
		ElMessage.error('error ' + error)
	}
}
/**
 * 页大小改变事件
 */
const bindSizeChange = (value: number) => {
	pagination.pageSize = value
	getLogList()
}
/**
 * 页号改变事件
 */
const bindCurrentChange = (value: number) => {
	pagination.pageNo = value
	getLogList()
}

// 日志回复
const onReply = (logId: number) => {
	ElMessageBox.prompt('请输入回复内容', {
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(({ value }) => {
		RequestLogReplyAdd(value, logId, account.mid).then(data => {
			if (data.resultCode == 1) {
				getLogList()
			}
		})
	})
}

/**
 * 查询
 */
const findLog = async () => {
	const startTime = dayjs(filters.value.starttime).format('YYYY-MM-DD')=='Invalid Date'?'':dayjs(filters.value.starttime).format('YYYY-MM-DD')
	const endTime = dayjs(filters.value.endtime).format('YYYY-MM-DD')=='Invalid Date'?'':dayjs(filters.value.endtime).format('YYYY-MM-DD')
	const data = await RequestLogList<LogDao.IData<any>>(
		filters.value.name,
		pagination.pageNo,
		pagination.pageSize,
		'',
		startTime,
		endTime
	)
	const { resultCode, resultInfo } = data
	if (resultCode === 1) {
		logList.value = resultInfo.list
		pagination.total = resultInfo.total
	}
}

/**
 * 刷新
 */
const bindRefresh = ()=>{
	getLogList()
}

onMounted(() => {
	getLogList()
})
</script>

<style lang="scss" scoped>
.replay {
	display: block;
	text-align: right;
	font-size: 12px;
	color: #9d9fa3;
	&:hover {
		text-decoration: underline;
	}
}
</style>
